<script setup>
import { reactive } from 'vue'
import { UserOutlined, UnlockOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

// 静态图片
import weixingLogin from '@/assets/imgs/weixing-login.jpg'

// 路由
const router = useRouter()

// 表单数据
const formObj = reactive({
	logName: '',
	logPwd: '',
})
const loginHandler = () => {
	if (formObj.logName.trim() === '' || formObj.logPwd.trim() === '') {
		message.error('用户名或密码不能为空！！')
		return
	}
	// 后台登录
	message.success('登录成功！！' + JSON.stringify(formObj))
	// 存储Token
	window.localStorage.setItem('token', '123456')
	// 路由跳转
	router.push('/')
}
</script>

<template>
	<div>
		<a-flex justify="center" align="center" style="height: 100vh">
			<div class="login-box">
				<a-flex justify="end" align="center" style="height: 100%; margin-right: 100px">
					<div class="login-form">
						<a-layout style="border-radius: 5px">
							<a-layout style="height: 364px; border-radius: 5px">
								<a-layout-content class="login">
									<h2>用户名和密码登录</h2>
									<a-space direction="vertical" :size="22">
										<a-input v-model:value="formObj.logName" placeholder="手机号/邮箱/用户名">
											<template #prefix>
												<UserOutlined />
											</template>
										</a-input>
										<a-input-password v-model:value="formObj.logPwd" @keyup.enter="loginHandler" placeholder="密码">
											<template #prefix>
												<UnlockOutlined />
											</template>
										</a-input-password>
										<a class="forget" href="#">忘记密码</a>
										<a-button type="primary" size="large" @click="loginHandler">登录</a-button>
									</a-space>
								</a-layout-content>
								<a-layout-sider class="webchart" width="300px">
									<a-space direction="vertical">
										<h2>微信扫一扫登录</h2>
										<img :src="weixingLogin" alt="" />
										<i>无需关注 立即登录</i>
									</a-space>
								</a-layout-sider>
							</a-layout>
							<a-layout-footer class="link">
								未注册手机验证后自动登录，注册即代表同意
								<a href="#">服务条款</a>
								和
								<a href="#">隐私协议</a>
							</a-layout-footer>
						</a-layout>
					</div>
				</a-flex>
			</div>
		</a-flex>
	</div>
</template>

<style scoped>
.login-box {
	height: 600px;
	border: 1px solid #ccc;
	width: 100%;
	background: url('@/assets/imgs/bg.png') -150px -200px;
}
:deep(.ant-layout) {
	background-color: #fff;
}
.login-form {
	width: 700px;
	height: 400px;
}

.login h2,
.webchart h2 {
	font-size: 16px;
	font-weight: bold;
	margin: 55px 0 30px 0;
	text-align: center;
}
.forget {
	margin-left: 254px;
}
:deep(.ant-space) {
	margin-left: 43px;
}

:deep(.ant-input) {
	width: 250px;
	height: 35px;
}
:deep(.ant-btn) {
	width: 310px;
}

/* 二维码 */
.ant-layout-sider {
	background-color: #fff;
}
.webchart {
	position: relative;
}
.webchart h2 {
	margin-right: 70px;
}
.webchart img {
	width: 70%;
	margin-top: -10px;
}
.webchart i {
	font-style: normal;
	font-size: 12px;
	position: relative;
	top: 20px;
	left: 40px;
}

.link {
	padding: 11px;
	background-color: #eeeeee;
	font-size: 12px;
	border-radius: 0 0 5px 5px;
}
.link a {
	text-decoration: underline;
}
</style>
